<template>
  <div class="not-found-container">
    <h1 class="code">404</h1>
    <p class="message">页面去太空旅行了 🚀</p>
    <router-link to="/" class="home-link">
      <button class="return-btn">返回首页</button>
    </router-link>
  </div>
</template>

<script setup>
// 可选：动态设置页面标题
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

onMounted(() => {
  document.title = `404 - ${route.meta.title || '页面未找到'}`
})
</script>

<style scoped>
.not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
  text-align: center;
}

.code {
  font-size: 10rem;
  color: #ff4757;
  margin: 0;
  animation: bounce 1s infinite alternate;
}

.message {
  font-size: 1.5rem;
  color: #666;
  margin: 1rem 0 2rem;
}

.home-link {
  text-decoration: none;
}

.return-btn {
  padding: 12px 24px;
  font-size: 1rem;
  color: white;
  background: #2d8cf0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.return-btn:hover {
  transform: translateY(-2px);
  background: #57a3f3;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}
</style>